<template>
  <div>
    首页
    <p>count:{{$store.state.count}}</p>
    <p>store 中的计算属性 doublecount:{{$store.getters.doublecount}}</p>
    <p>
      <button @click="addCountFn">同步count+1</button>
      <button @click="jianCountFn">同步count-10</button>
      <button @click="addCountAsyncFn">异步count+1</button>
      <button @click="jianCountAsyncFn">异步count-10</button>
    </p>

    <hr />
    <p>modules-user中的数据:{{$store.state.user.userinfo.name}}--{{$store.state.user.userinfo.age}}</p>
    <p>modules-user模块中的计算属性:{{$store.getters['user/newuserinfo'].name}}--{{$store.getters['user/newuserinfo'].age}}</p>
    <p>
      <button @click="addAgeFn">异步修改年龄</button>
    </p>
  </div>
</template>
<script>
// 现在在页面中不使用他 因为在页面中获取仓库的方式 有另外两种 this.$store 辅助函数mapState
// import store from "@/store";
// console.log("store", store);
export default {
  data() {
    return {};
  },
  mounted() {
    //  / console.log(this.$route);
    console.log("this-home", this);
  },
  methods: {
    addCountFn() {
      this.$store.commit("addcount");
    },
    jianCountFn() {
      this.$store.commit("jiancount", 10);
    },
    addCountAsyncFn() {
      this.$store.dispatch("addcountAsync");
    },
    jianCountAsyncFn() {
      this.$store.dispatch("jiancountAsync", 10);
    },
    addAgeFn() {
      // this.$store.commit("user/addcount");
      this.$store.dispatch("user/addAgeAsync");
    }
  }
};
</script>
<style scoped>
</style>